<template>
    <div class="page_container">
        <navBar :config="navBarConfig" />
        <div class="page_content">
            <div class="securitySetting">
                <div>账号安全程度</div>
                <div>
                    <el-progress :stroke-width="15" :percentage="Number(percentage)" :color="progressBg"
                        :format="format"></el-progress>
                </div>
                <div>安全级别</div>
                <div>{{ level }}</div>
            </div>
            <div class="SafetyInformation">
                <div>
                    <span>
                        <span class="left_one">
                            <i class="el-icon-lock"></i>
                            账号密码
                        </span>
                        <span class="text">建议您定期更换密码，设置密码为6-12位，包含字母符号特殊字符</span>
                    </span>
                    <span class="set_up">
                        <span class="left_set" v-if="passSet">
                            <i class="el-icon-setting"></i>
                            已设置
                        </span>
                        <span class="left_notSet" v-else>
                            <i class="el-icon-warning-outline"></i>
                            未设置
                        </span>
                        <span class="right_set" @click="changeItem('Pass')">
                            <i class="el-icon-edit"></i>
                            {{ passSet ? '修改' : '设置' }}
                        </span>
                    </span>
                </div>
                <div>
                    <span>
                        <span class="left_one">
                            <i class="el-icon-mobile-phone"></i>
                            手机绑定
                        </span>
                        <span class="text">已绑定手机<span style="color: #f6af3f;">{{ showPhone
                        }}</span>[您的手机号可以直接用于登录、找回密码等]</span>
                    </span>
                    <span class="set_up">
                        <span class="left_set" v-if="isPhone">
                            <i class="el-icon-setting"></i>
                            已绑定
                        </span>
                        <span class="left_notSet" v-else>
                            <i class="el-icon-warning-outline"></i>
                            未绑定
                        </span>
                        <span class="right_set" @click="changeItem('Phone')">
                            <i class="el-icon-edit"></i>
                            {{ isPhone ? '修改' : '绑定' }}
                        </span>
                    </span>
                </div>
                <div>
                    <span>
                        <span class="left_one">
                            <i class="el-icon-message"></i>
                            邮箱绑定
                        </span>
                        <span class="text">尚未绑定邮箱，请前去验证，便于用户登录、找回密码</span>
                    </span>
                    <span class="set_up">
                        <span class="left_set" v-if="isEmail">
                            <i class="el-icon-setting"></i>
                            已绑定
                        </span>
                        <span class="left_notSet" v-else>
                            <i class="el-icon-warning-outline"></i>
                            未绑定
                        </span>
                        <span class="right_set" @click="changeItem('Email')">
                            <i class="el-icon-s-tools"></i>
                            {{ isEmail ? '修改' : '设置' }}
                        </span>
                    </span>
                </div>
                <div>
                    <span>
                        <span class="left_one">
                            <i class="icon_set"></i>
                            微信绑定
                        </span>
                        <span class="text">尚未绑定微信，请前去绑定，以便于下次登录</span>
                    </span>
                    <span class="set_up">
                        <span class="left_set" v-if="isWeChat">
                            <i class="el-icon-setting"></i>
                            已绑定
                        </span>
                        <span class="left_notSet" v-else>
                            <i class="el-icon-warning-outline"></i>
                            未绑定
                        </span>
                        <span class="right_set" @click="changeItem('WeChat')">
                            <i class="el-icon-link"></i>
                            {{ isWeChat ? '修改' : '绑定' }}
                        </span>
                    </span>
                </div>
            </div>
        </div>

        <el-dialog :visible.sync="dialogVisible" :width="dialogWidth" :close-on-click-modal="false"
            :before-close="handleClose" :close-on-press-escape="false" v-dialogDrag>
            <components ref="dialogCom" :is="componentName" :bindingPhone="phone" @complete="complete" :isEmail="isEmail"
                :isWeChat="isWeChat">
            </components>
        </el-dialog>
    </div>
</template>

<script>
import { getUserInfoRequest } from '@/api/user'
import changeEmail from './components/changeEmail'
import changePass from './components/changePass'
import changePhone from './components/changePhone'
import changeWeChat from './components/changeWeChat'
export default {
    name: 'BaiaoweifanUiBasicInformation',
    components: {
        changeEmail,
        changePass,
        changePhone,
        changeWeChat
    },
    '$store.state.login.userInfo': {
        handler(Val, oldVal) {
            this.changeInfo(Val)
            this.$forceUpdate();
        },
        deep: true,
    },
    data() {
        return {
            navBarConfig: {
                leftTool: true,
                rightTool: false,
            },
            //是否绑定账号密码
            passSet: true,
            //是否绑定手机
            isPhone: true,
            //是否绑定邮箱
            isEmail: false,
            //是否绑定微信
            isWeChat: false,
            phone: null,
            dialogVisible: false,
            dialogWidth: '850px',
            weChatWidch: null,
            componentName: null,
        };
    },
    created() {
        this.changeInfo(JSON.parse(localStorage.getItem('userInfo')))
    },
    computed: {
        //手机号屏蔽
        showPhone() {
            let left = this.phone.substring(0, 3)
            let right = this.phone.substring(this.phone.length - 3)
            return left + '****' + right
        },
        //进度条颜色
        progressBg() {
            let size = (this.passSet ? 1 : 0) + (this.isPhone ? 1 : 0) + (this.isEmail ? 1 : 0) + (this.isWeChat ? 1 : 0)
            // console.log(this.passSet, this.isPhone, this.isEmail, this.isWeChat, size);
            const colorList = {
                1: 'red',
                2: '#f6af3f',
                3: '#409eff',
                4: '#67c23a'
            }
            // console.log(colorList[3]);
            return colorList[size]
        },
        //进度条进度
        percentage() {
            let size = (this.passSet ? 1 : 0) + (this.isPhone ? 1 : 0) + (this.isEmail ? 1 : 0) + (this.isWeChat ? 1 : 0)
            const percentageList = {
                1: 25,
                2: 50,
                3: 75,
                4: 100
            }
            return percentageList[size]
        },
        //安全等级
        level() {
            let size = (this.passSet ? 1 : 0) + (this.isPhone ? 1 : 0) + (this.isEmail ? 1 : 0) + (this.isWeChat ? 1 : 0)
            const levelList = {
                0: '非常低',
                1: '低',
                2: '一般',
                3: '中等',
                4: '高'
            }
            return levelList[size]
        }
    },
    beforeMount() {
        window.addEventListener('resize', () => {
          this.$resizeDialog(850,this.dialogWidth)
        })
    },
    beforeDestroy() {
       this.$unResizeDialog()
    },
    methods: {
        format() {
            return ''
        },
        changeInfo(value) {
            const { mobilePhone, email, weixin } = value
            this.phone = mobilePhone || '***'
            this.isphone = mobilePhone || false
            this.isEmail = Boolean(email) || false
            this.isWeChat = Boolean(weixin) || false
        },
        changeItem(value) {
            this.componentName = 'change' + value
            this.dialogVisible = true
        },
        async complete(value) {
            const showWich = {
                'password': '密码修改成功！',
                'phone': '绑定手机号已更换！',
                'email': '邮箱已更换！',
                'weChat': '操作成功！'
            }
            this.dialogVisible = false
            this.$message({
                message: showWich[value],
                type: 'success'
            });
            const userInfo = await getUserInfoRequest()
            // console.log(userInfo, 'userInfo');
            this.$store.commit('login/SET_USERINFO', userInfo.data)
            this.changeInfo(userInfo.data)
            if (value === 'weChat') {
                location.reload()
            }
        },
        handleClose() {
            this.$refs.dialogCom.clear()
            this.dialogVisible = false
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep .el-progress-bar__outer {
    border-radius: 0;
    border: 1px solid #ccc;
    width: 150px;

    .el-progress-bar__inner {
        border-radius: 0;
    }
}

.securitySetting {
    color: #666;
    font-size: 12px;
    display: flex;
    align-items: center;

    div {
        margin-right: 5px;
    }
}

.SafetyInformation {
    margin-top: 25px;
    display: flex;
    flex-direction: column;

    div {
        width: 98%;
        height: 80px;
        padding-left: 25px;
        line-height: 80px;
        border-top: 1px dashed #ccc;
        display: flex;
        justify-content: space-between;

        .left_one {
            font-weight: 700;
            color: #555;
        }

        .text {
            font-size: 12px;
            color: #777;
            margin-left: 50px;
        }

        .set_up {
            .left_set {
                color: rgb(21, 211, 128);
                padding-right: 20px;
                border-right: 1px solid #999;
            }

            .right_set {
                color: #077cf0;
                padding-left: 20px;
                cursor: pointer
            }

            .left_notSet {
                color: red;
                border-right: 1px solid #999;
                padding-right: 20px;
            }
        }

        .icon_set {
            display: inline-block;
            width: 20px;
            height: 20px;
            transform: translateY(3px);
            background: url(../../../assets/wx.png) no-repeat;
            background-size: 20px;
        }
    }
}

// ::v-deep .el-dialog__header {

//     background: #fff;

// }
</style>